import { getTextWidth } from '@/utils'
export default {
  props: {
    showIndex: {
      type: Boolean,
      default: false,
    },
    showSelection: {
      type: Boolean,
      default: false,
    },
    checkList: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    event: {
      type: Object,
      default: () => ({})
    },
    actions: {
      type: Array,
      default: () => []
    },
    fields: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 600
    }
  },
  data() {
    return {}
  },
  computed: {
    columns() {
      return this.fields.filter(i => (i.table === undefined || i.table) && (i.show === undefined || i.show))
    },
    tableProps() {
      return {
        border: true,
        height: this.height,
        data: this.columns.length ? this.data : [],
        ...this.$attrs
      }
    },
  },
  methods: {
    createSlots(callback) {
      return { default: callback }
    },
    handlerClick(btn, data) {
      this.$emit('tableEvent', btn, data)
    },
    headerDragend(a, b, c) {
      this.$emit('column-width-change', a, b, c)
    },
    actionColumn() {
      const slots = props => {
        const actionBtn = (data) => {
          const { label, ...option } = data
          const attrs = { ...option, underline: false, size: 'mini' }
          return <el-link props={attrs} onClick={() => this.handlerClick(data, props)}>{label}</el-link>
        }
        return <div class="table-btns">{this.actions.map(actionBtn)}</div>
      }
      const width = this.actions.reduce((acc, cur) => acc + getTextWidth(cur.label) + 20, 10)
      const props = {
        label: '操作',
        fixed: 'right',
        width: width < 200 ? 200 : width
      }
      return <el-table-column props={props} scopedSlots={{ default: slots }} />
    },
    createColumns(fields) {
      const list = fields.map(field => this.createColum(field))
      if (this.actions.length) list.push(this.actionColumn());
      if (this.showIndex) list.unshift(<el-table-column type="index" fixed align="center" width="60" />);
      if (this.showExpand) list.unshift(<el-table-column type="expand" fixed align="center" width="60" />);
      if (this.showSelection) list.unshift(<el-table-column type="selection" fixed align="center" width="60" />);
      return list
    },
    filterHandler(value, row, column) {
      return row[column.property] === value;
    },
    convertDict(options, scope, config) {
      const option = options.find(i => i.value === scope.row[config.prop])
      if (option && option.type) {
        return <el-tag size="mini" type={option.type}>{option.label}</el-tag>
      }
      if (option && option.color) {
        return <span style={{ color: option.color }}>{option.label}</span>
      }
      return option ? option.label : ''
    },
    createColum(option) {
      const scoped = {}

      const props = {
        showOverflowTooltip: true
      }

      const { group = [], render, options, columnWidth, ...config } = option

      Object.assign(props, config, { width: columnWidth })
      
      if (group.length) {
        return <el-table-column props={props}>{group.map(i => this.createColum(i))}</el-table-column>
      }

      if (render) {
        scoped.default = scope => render(h, scope) 
      }
      
      if (options && options.length) {
        scoped.default = scope => this.convertDict(options, scope, props)
      }

      return <el-table-column props={props} scopedSlots={scoped} />;
    }
  },
  render() {
    return (
      <el-table props={this.tableProps} on-header-dragend={this.headerDragend} on={this?.event} key={new Date().getTime()}>
        {this.createColumns(this.columns)}
        <el-empty slot="empty" description={this.columns.length ? '暂无数据' : '配置加载失败'}></el-empty>
      </el-table>
    )
  }
}